<template>
  <div class="annualbox">
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="用电企业">
                  <FilterSelect2
                      v-model="formdata.companyId"
                      :optionlist="xitonglist"
                      :valuekey="{ name: 'name', value: 'id' }"
                    ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="年份">
                  <el-date-picker style="width: 100%;" v-model="formdata.year" type="year" value-format="yyyy" placeholder="选择年" size="small"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="14" style="text-align: right;">
                <el-form-item label="">
                  <el-button size="small" @click="chongzhi">重 置</el-button>
                  <el-button size="small" type="primary" @click="gettablelist">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
    </div>
    <div class="bodybox">
        <TopTitle @command="command" @daochu="daochu" @shuaxin="gettablelist">
          <template #leftother>
            <el-button type="primary" size="small" @click="$refs.DialodAddrefs.dialogVisible=true">新 增</el-button>
            <!-- <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-success="handleChange"> -->
              <el-button type="primary" size="small" @click="importDialogVisible=true">导 入</el-button>
            <!-- </el-upload> -->
          </template>
        </TopTitle>
        <div class="table">
          <TableColumn
            :issize="iissize"
            ref="tabledataref"
            :tableData="tableData"
            :tableConfig="tableConfig"
          >
            <el-table-column label="操作">
              <template #default="{ row }">
                <div>
                  <el-link type="primary" :underline="false" class="link"
                    @click="toput(row)"
                    >编辑</el-link
                  >
                  <el-link type="danger" @click="del(row)" :underline="false">删除</el-link>
                </div>
              </template>
            </el-table-column>
          </TableColumn>
        </div>
        <div class="fenye">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="pageNo"
            @current-change="gettablelist"
            :page-size="15"
            :total="total"
          >
          </el-pagination>
        </div>
        <DialodAdd :xitonglist="xitonglist" ref="DialodAddrefs" @getlist="gettablelist"/>
    </div>
    <el-dialog
      title="导入年度预算表"
      :visible.sync="importDialogVisible"
      width="400px"
      :close-on-click-modal="false"
    >
      <el-upload
        ref="upload"
        :auto-upload="false"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-change="handleChange"
        accept=".xlsx,.xls"
        :file-list="fileList"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传xlsx/xls文件</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" size="small">取 消</el-button>
        <el-button type="primary"  size="small" @click="sure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {getBudgetListapi,postImportExcelapi,deleteBudgetListapi} from '@/api/energy-consumption/demand/annual-budget'
import { getCompanyListApi } from '@/api/energy-consumption/Equipment-energy/Energy-analysis'
import TopTooltip from '@/components/TopTitle/newtitle.vue'
import TableColumn from '@/components/Table/index.vue'
import { exportexcel } from '@/utils/excel'
import DialodAdd from './dialod-add.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    DialodAdd,
    TopTooltip,
    TableColumn
  },
  data() {
    return {
      total:0,
      pageNo:0,
      pageSize:15,
      formdata:{},
      xitonglist:[],
      iissize: 'medium',
      fileList:[],
      importDialogVisible:false,
      tableData: [],
      formfile:{},
      tableConfig: [
        { label: '序号', type: 'index', width: '100', center: 'center' },
        { label: '企业名称', prop: 'companyName' },
        { label: '年', prop: 'year' },
        { label: '月', prop: 'month' },
        { label: '期', prop: 'periodValue' },
        { label: '预算电量(kWh)', prop: 'budgetPower' },
        { label: '未税预算电费(元)', prop: 'withoutTaxBudgetCost' },
        { label: '实际电量(kWh)', prop: 'actualPower' },
        { label: '未税实际电费(元)', prop: 'withoutTaxActualCost' },
        { label: '实际税费(元)', prop: 'actualTax' },
      ]
    };
  },

  async mounted() {
    const { data: { list } } = await getCompanyListApi()
    this.xitonglist = list
    const PhotoCompanyId = localStorage.getItem('PhotoCompanyId')
    this.$set(this.formdata,'companyId',PhotoCompanyId?+PhotoCompanyId:list[0].id)
    this.gettablelist()
  },

  methods: {
    // 获取表格数据
    async gettablelist(){
      this.$refs.tabledataref.loading=true
      const pageNo=this.pageNo-1
      const {data:{list,totalCount}}=await getBudgetListapi({...this.formdata,pageSize:this.pageSize,pageNo})
      this.total=totalCount
      this.tableData=list
      this.$refs.tabledataref.loading=false
    },
    // 确认导入
    async sure(){
      const res= await postImportExcelapi(this.formfile)
      this.$message({
        type:res.code==200?'success':'warning',
        message:res.message
      })
      this.gettablelist()
      this.cancel()
    },
    // 导入
    async handleChange(val,file){
      this.fileList=file
      this.formfile = new FormData();
      this.formfile.append('file', val.raw);
    },
    toput(row){
      this.$refs.DialodAddrefs.putrow(row)
    },
    cancel(){
      this.importDialogVisible = false
      this.fileList=[]
      this.formfile={}
    },
    // 删除
    del(row){
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await deleteBudgetListapi(row.id).then(res => {
            this.$message({
              type: res.code == '200' ? 'success' : 'warning',
              message:res.code=='200'?'删除成功':res.message
            })
          })
          this.gettablelist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    chongzhi(){
      const PhotoCompanyId = localStorage.getItem('PhotoCompanyId')
      this.$set(this.formdata,'companyId',PhotoCompanyId?+PhotoCompanyId:this.xitonglist[0].id)
      this.formdata.year=''
      this.gettablelist()
    },
        // 导出
    daochu() {
      exportexcel(
        '/ecm-microservice-biz/ecm/annual/budget/exportExcel',
        this.formdata,
        '年度预算表'
      )
    },
    // 表格密度调节
    command(val) {
      this.iissize = val
    }
  },
};
</script>
<style lang="scss" scoped>
.annualbox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .bodybox{
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .table{
      height: 88%;
      .link{
        margin-right: 10px;
      }
    }
    .fenye{
      margin-top: 10px;
      text-align: right;
    }
  }
}
// ::v-deep .upload-demo{
//   display: inline-block;
//   margin-left: 10px;
// }
// ::v-deep .el-upload-list{
//   display: none;
// }
</style>